<template>
    <div class="contain">
        <!--<div class="header">-->
            <!--<header>-->
                <!--<router-link to="/">首页 / </router-link>-->
                <!--账户生成-->
            <!--</header>-->
        <!--</div>-->
        <el-button class="link" type="primary" >
            <router-link to="/system/accountEdit" style="color: #fff;">新增账户</router-link>
        </el-button>
        <el-row class="input_modal flex-box-align">
            <div class="search-item flex-box-align">
                <div class="search-title">手机号：</div>
                <el-input v-model="mobile" placeholder="请输入内容" class="" @keyup.enter.native="search"></el-input>
            </div>
             <div class="search-item flex-box-align">
                <div class="search-title">姓名：</div>
                <el-input v-model="trueName" placeholder="请输入内容" class="" @keyup.enter.native="search"></el-input>
            </div>
            <el-button style="margin-left: 10px" type="primary" @click="getAccountList(1)">查询</el-button>
        </el-row>
        <div class="">
            <el-table  :data="tableData"  style="width: 100%;margin-top: 40px;text-align:center;"  :border='true' >
                  <el-table-column align="center"  prop="userName"    label="登录名"></el-table-column>
                  <el-table-column align="center"  prop="trueName" label="姓名"></el-table-column>
                  <el-table-column align="center"  prop="mobile" label="手机"></el-table-column>
                  <el-table-column align="center" prop="roleName" label="所属角色"></el-table-column>
                  <el-table-column align="center" prop=""  label="操作" fixed="right">
                      <template slot-scope="scope">
                          <el-button class="link" type="info" size="small" style="background: #409EFF;border: 1px solid #409EFF;color: #fff">
                               <router-link :to="{ name: 'accountEdit', query: {userId:tableData[scope.$index].userId}}"  style=""><span style="color: #fff">编辑</span></router-link>
                          </el-button>
                          <el-button type="danger" size="small" @click="deleteAccount(tableData[scope.$index].userId)">删除</el-button>
                      </template>
                  </el-table-column>
            </el-table>
        </div>

        <div class="pagination">
             <el-pagination   @size-change="handleSizeChange"  @current-change="handleCurrentChange"       
                :current-page.sync="pageIndex"              
                :page-size="pageSize"   
                :page-sizes='[10,20,30,40]'    
                layout="sizes, prev, pager, next"       
                :total="pageCount">     
            </el-pagination>
        </div>
    </div>
</template>

<script>
let CONSTANT = require('../../constant/constant.js');
let common = require("../../common.js");
export default {
    data() {
        return { 
            tableData:[],
            trueName:'',
            mobile:'',
            pageCount:null,
            pageIndex:1,
            pageSize:10,
        }
    },
    mounted() {
        this.getAccountList();
    },
    methods: {
        getAccountList:function(){
           let url = CONSTANT.URL.USER.FINDADMINUSERBYPAGE;
           let param = {
               pageIndex:this.pageIndex,
               pageSize:this.pageSize,
            //    trueName:this.trueName,
            //    mobile:this.mobile
           };
           if(this.trueName != ''){
               param.trueName = this.trueName;
           }
           if(this.mobile != ''){
               param.mobile = this.mobile;
           }
           this.loading = true;
            common.requestAjax(url,param,null,(res)=>{
                this.loading = false;
                let data = res.data;
                this.tableData = data.bussData;
                this.pageCount = data.pageCount*this.pageSize;
            }) 
        },
        deleteAccount:function(id) {
            this.$confirm('确定删除?', '提示', {           
                confirmButtonText: '确定',           
                cancelButtonText: '取消',           
                type: 'warning'         
            }).then(() => {           
                let  url = CONSTANT.URL.USER.DELETEADMINUSERBYID;
                let param = {userId:id} ;
                // let param = JSON.stringify(data);
                common.requestAjax(url,param,null,(res)=>{
                    if(res.status == 200){
                        this.$message({
                            type:'success',
                            message:'删除成功!'
                        });
                        this.getAccountList();
                    }
                    else{
                        this.$message({
                            type:'warning',
                            message:res.msg
                        })
                    }
                })      
            }).catch(() => {           
                this.$message({             
                    type: 'info',             
                    message: '已取消删除'           
                });                   
            });    
        },
        search:function(e){
            if(e.keyCode == 13){
                this.pageIndex = 1;
                this.getAccountList(); 
            }
        },
        handleSizeChange(val) {
            this.pageSize= val;
            this.getAccountList();
        },
        handleCurrentChange(val) {
            this.pageIndex = val;
            this.getAccountList();
        }
    },
    filters:{
    
    }
}
</script>

<style lang="scss" scoped>
    a {
        color: #999999;
    }
    .contain {
         .header{
            margin: 20px 0;
            padding-bottom: 10px;
            border-bottom:1px solid #dedede; 
        }
        .input_modal {
            /*margin-top: 20px;*/
            margin-bottom: 20px;
            .search-item{
                float: left;
                margin-right: 20px;
                margin-top: 20px;
                .el-input,.el-select{
                    width: 180px;
                }
            }
            button{
                float: left;
                margin-top: 20px;
            }
            .search-title{
                display: inline;
                width: 100px;
                height: 36px;
                line-height: 36px;
                text-align: right;
                margin-bottom: 20px;
                margin-right: 10px;
            }
        }
        .pagination {
            text-align: right;
            width: 100%;
            margin-top: 60px;
        }
    }
</style>
